<template>
    <div class="order-list">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            订单列表
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back" v-if="showBack">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <!-- 全部审核/已处理/未处理 -->
                <Row>
                    <Col class="allAudit">
                        <Button class="current" @click="current(0)">全部订单</Button>
                        <Button @click="current(1)">待付款</Button>
                        <Button @click="current(2)">待接单</Button>
                        <Button @click="current(3)">待服务</Button>
                        <Button @click="current(4)">服务中</Button>
                        <Button @click="current(5)">待评价</Button>
                        <Button @click="current(6)">已完成</Button>
                        <Button @click="current(7)">已取消</Button>
                        <Button @click="current(8)">已关闭</Button>
                    </Col>
                </Row>
                <div class="search-box">
                    <Row :gutter="16" style="min-width: 1024px">
                        <Col :span="6">
                            订单编号：
                            <Input v-model="searchForm.order_no" placeholder="订单编号" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            发单人：
                            <Input v-model="searchForm.linkman" placeholder="发单人昵称" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            地区：
                            <!-- <Input v-model="searchForm.downUser" placeholder="接单人昵称" style="width:auto"/> -->
                            <Cascader v-model="searchForm.address" :data="data" :load-data="loadData" change-on-select filterable style="width:200px;display:inline-block"></Cascader>
                        </Col>
                        <Col :span="6">
                            <div class="search-btn" @click="getOrderList">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="table-box">
                    <el-table
                        :data="tableData"
                        size="mini"
                        style="width: 100%">
                        <!-- <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="order_no"
                            label="订单编号">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="订单标题">
                            <template slot-scope="scope">
                                <p>{{scope.row.title}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="create_time"
                            label="提交时间"
                            min-width="120">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="发单人账号">
                            <template slot-scope="scope">
                                <p>{{scope.row.userInfoByOrder ? scope.row.userInfoByOrder.account ? scope.row.userInfoByOrder.account : '- -' : '- -' }}</p>
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column
                            align="center"
                            label="订单标题">
                            <template slot-scope="scope">
                                <p>{{scope.row.orderTitle}}</p>
                            </template>
                        </el-table-column> -->
                        <!-- <el-table-column
                            align="center"
                            prop="orderServiceType.name"
                            label="服务类型">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="price"
                            label="订单金额">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="pay_way"
                            label="支付方式">
                            <template slot-scope="scope">
                                <p>{{scope.row.status !== '0' ? (scope.row.pay_way === '1' ? '支付宝' : '微信') : '- -'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="订单类型">
                            <template slot-scope="scope">
                                <p>{{(scope.row.type === '1' ? '即时-' : '预约-') + (scope.row.mode === '1' ? '单人订单' : '多人订单')}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="订单状态">
                            <template slot-scope="scope">
                                <p>
                                    {{
                                        scope.row.status === '0' ? '待支付' : 
                                        scope.row.status === '1' ? '待接单' : 
                                        scope.row.status === '2' ? '待服务' : 
                                        scope.row.status === '3' ? '服务中' : 
                                        scope.row.status === '4' ? '待评价' : 
                                        scope.row.status === '5' ? '已完成' : 
                                        scope.row.status === '98' ? '已取消' : '已关闭'
                                    }}
                                </p>
                            </template>
                        </el-table-column>
                        
                        <el-table-column
                            label="操作"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="openTake(scope.row.id)">查看接单人</el-button>
                                <el-button type="text" size="small" :disabled="scope.row.status === '5'" @click="closeOrder(scope.row.id)">关闭订单</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog
                    title="接单人信息"
                    :visible.sync="dialogVisible"
                    width="40%"
                    :before-close="() => {dialogVisible = false}">
                    <el-table
                        border
                        size="mini"
                        :data="takeOrderData"
                        style="width: 100%">
                        <el-table-column
                            prop="userInfo.account"
                            align="center"
                            label="账号">
                        </el-table-column>
                        <el-table-column
                            prop="userInfo.name"
                            align="center"
                            label="姓名">
                        </el-table-column>
                        <el-table-column
                            prop="userInfo.phone"
                            align="center"
                            label="电话">
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>

                <div class="page-box">
                    <Page :total="total" :current="current_page" :page-size="pageSize" show-elevator show-total @on-change="pageChange" />
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from '@/api/api'
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                showBack: false,
                data: [],
                searchForm: {
                    order_no: '',
                    linkman: '',
                    address: [],
                },
                state: null,
                tableData: [],
                takeOrderData: [],
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },//日期选择范围配置
                total: 0,//数据总条数
                pageSize: 10,//每页显示条数
                current_page: 1,//当前页
                dialogVisible: false,
            }
        },
        mounted(){
            this.getOrderList();
            this.province();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },
            //切换（全部审核/已处理/未处理）选中状态0待支付1未接单2待服务3服务中4待评价5已完成
            current(index,i=0) {
                $('.allAudit button').removeClass('current');
                $('.allAudit button:eq('+index+')').addClass('current');
                if(index == 0){
                    this.state = '';
                }else if(index == 7) {
                    this.state = 98;
                }else if(index == 8) {
                    this.state = 99
                }
                else{
                    this.state = index - 1;
                }
                if(i === 0) {
                    this.current_page = 1;
                    this.getOrderList();
                }else {
                    this.$route.params.state = 0;
                }
            },

            pageChange(current_page) {
                this.current_page = current_page;
                this.getOrderList();
            },
            //获取订单列表
            getOrderList() {
                if(this.$route.params.state) {
                    this.showBack = true;
                    this.current(this.$route.params.state,1)
                }
                let body = {
                    model: 'Orders',
                    with: {
                        0: 'userInfoByOrder'
                    },
                    offset: this.current_page -1,
                    limit: this.pageSize,
                    orderBy: '',
                    search: {
                        order_no: this.searchForm.order_no,
                        linkman: this.searchForm.linkman,
                    },
                    condition: {}
                }
                if(this.searchForm.address.length > 0) {
                    let re = /市/;
                    if(re.test(this.searchForm.address[0])) {
                        let newAddress = [];
                        for (let i = 0; i < this.searchForm.address.length; i++) {
                            newAddress.push(this.searchForm.address[i])
                        }
                        
                        newAddress.splice(0,1);
                        var address = newAddress.join('');
                    }else{
                        var address = this.searchForm.address.join('')
                    }
                    
                    body.search.address = address;
                }
                if(this.state || this.state === 0) {
                    body.condition.status = this.state;
                }
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    if(res.data.code === 200) {
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.count * 1;
                        this.loading.isLoading = false;
                    }else{
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },
            //获取接单人信息
            openTake(id) {
                let body = {
                    model: 'Orders',
                    with: {
                        0: 'orderUsersInfo'
                    },
                    offset: '0',
                    limit: '10000',
                    orderBy: 'id',
                    condition: {
                        id
                    }
                };
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    if(res.data.code === 200){
                        this.takeOrderData = res.data.data.data[0].orderUsersInfo;
                        if(this.takeOrderData.length > 0){
                            this.dialogVisible = true;
                        }else{
                            this.$Message.warning('暂无数据');
                        }
                        this.loading.isLoading = false;
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            //关闭订单
            closeOrder(id) {
                this.$confirm('此操作将关闭该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let body = {
                        model: 'Orders',
                        data: {
                            status: '5'
                        },
                        update_condition: {
                            id
                        }
                    };
                    this.loading.isLoading = true;
                    api.createData(body).then(res => {
                        if(res.data.code === 200) {
                            this.$Notice.success({
                                title: '提示',
                                desc: '恭喜你，操作成功！'
                            });
                            this.getOrderList();
                        }else{
                            this.$Notice.error({
                                title: '错误',
                                desc: '服务器错误'
                            });
                            this.loading.isLoading = false;
                        }
                    }).catch(err => {
                        this.$Notice.error({
                            title: '错误',
                            desc: err
                        });
                    })
                })
            },

            //省市区
            province() {
                let body = {
                    model: 'Provinces',
                    limit: 1000,
                    offset: 0,
                    orderBy: 'id asc'
                };
                //省
                api.getDataList(body).then(res => {
                    let data = res.data.data.data;
                    let province = [];
                    for (const item of data) {
                        let one = {
                            value: item.province_name,
                            label: item.province_name,
                            id: item.id,
                            children: [],
                            loading: false,
                            type: 0
                        };
                        province.push(one)
                    }
                    this.data = province;
                })
            },

            loadData(item,callback) {
                item.loading = true;
                if(item.type === 0) {
                    let body = {
                        model: 'Citys',
                        limit: 1000,
                        offset: 0,
                        orderBy: 'id asc',
                        condition: {
                            province_id: item.id
                        }
                    };
                    //市
                    api.getDataList(body).then(res => {
                        let data = res.data.data.data;
                        let city = [];
                        for (const citys of data) {
                            let one = {
                                value: citys.city_name,
                                label: citys.city_name,
                                id: citys.id,
                                children: [],
                                loading: false,
                                type: 1
                            };
                            city.push(one)
                        }
                        item.children = city;
                        item.loading = false;
                        callback();
                    })
                }else if(item.type === 1) {
                    let body = {
                        model: 'Areas',
                        limit: 1000,
                        offset: 0,
                        orderBy: 'id asc',
                        condition: {
                            city_id: item.id
                        }
                    };
                    //区
                    api.getDataList(body).then(res => {
                        let data = res.data.data.data;
                        let area = [];
                        for (const areas of data) {
                            let one = {
                                value: areas.area_name,
                                label: areas.area_name,
                            };
                            area.push(one)
                        }
                        item.children = area;
                        item.loading = false;
                        callback();
                    })
                }

            },

            search() {
                
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .order-list{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            table thead tr th{
                background-color: #f4f4f4;
            }
            .allAudit{
                .current{
                    background-color: @greenColor !important;
                    border: 1px solid @greenColor;
                    color: #fff !important;
                }
            }
            .search-box{
                margin-top: 20px;
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .table-box{
                margin-top: 20px;
                min-width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>